<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option"/>
    <el-dialog title="权限配置" :visible.sync="grade.box" width="40%" append-to-body>
      <div style="padding-bottom: 30px;">
        <el-button @click="handleResetChecked" type="danger" size="mini">清空权限</el-button>
        <el-button @click="handleSelectAll" type="primary" size="mini">全选</el-button>
        <el-button @click="handleDisExpandAll" type="primary" size="mini">收缩</el-button>
        <el-button @click="handleExpandAll" type="primary" size="mini">展开</el-button>
      </div>
      <div style="height:500px;overflow:auto;" v-loading="loadingGrade">
        <el-tree
          :data="allMenuData"
          :expand-on-click-node="false"
          :default-checked-keys="grade.check"
          show-checkbox
          node-key="name"
          :default-expand-all="expandAll"
          ref="nodeTree"
        ></el-tree>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button :loading="isUpdatingGrade" type="primary" @click="handleGradeUpdate">更新</el-button>
        </span>
    </el-dialog>
  </el-card>
</template>

<script>
import ColumnType from '@/framework/constant/ColumnType'
import CURDTable from '@/framework/components/table/CURDTable'
import { roleApi } from '@/feature/system/infra/api/roleApi'
import { mapGetters } from 'vuex'
import { deepClone } from '@/utils/util'

export default {
  components: { CURDTable },
  computed: {
    ...mapGetters(['permission', 'menuAll', 'allPermission']),
    allMenuData() {
      return this.calMenus(deepClone(this.menuAll))
    }
  },
  methods: {
    handleDisExpandAll() {
      this.expandAll = false
      this.buildData()
    },
    handleExpandAll() {
      this.expandAll = true
      this.buildData()
    },
    buildData() {
      for (let i = 0; i < this.$refs.nodeTree.store._getAllNodes().length; i++) {
        this.$refs.nodeTree.store._getAllNodes()[i].expanded = this.expandAll
      }
    },
    handleSelectAll() {
      this.$refs.nodeTree.setCheckedKeys(this.allMenuData.map(el => el.name))
    },
    handleResetChecked() {
      this.$confirm('确认清空权限吗', '提示', {
        callback: (r) => {
          if (r === 'confirm') {
            this.$refs.nodeTree.setCheckedKeys([])
          }
        }
      })
    },
    calMenus(items) {
      for (let i = 0; i < items.length; i++) {
        const item = items[i]
        if (item.children && item.children.length > 0) {
          item.children = this.calMenus(item.children)
        } else {
          if (item.buttons && item.buttons.length) {
            item.children = item.buttons
          }
        }
      }
      return items
    },
    handlePower({ arg: row }) {
      this.currentRole = row
      this.grade.box = true
      this.loadingGrade = true
      roleApi.queryRoleCodeList(row.id).then(data => {
        data = data || []
        this.grade.check = (data || []).filter(el => this.allPermission[el])
        this.$nextTick(() => {
          this.$refs.nodeTree.setCheckedKeys(this.grade.check)
        })
      }).finally(() => {
        this.loadingGrade = false
      })
    },
    handleGradeUpdate() {
      this.isUpdatingGrade = true
      const checkedItems = this.$refs.nodeTree
        .getCheckedKeys(false)
        .concat(this.$refs.nodeTree.getHalfCheckedKeys())
      roleApi.saveRoleCodeList(this.currentRole.id, checkedItems.filter(el => el))
        .then(() => {
          this.isUpdatingGrade = false
          this.$refs.nodeTree.setCheckedKeys([])
          this.grade.check = []
          this.grade.box = false
          this.$success()
        })
        .catch(() => {
          this.isUpdatingGrade = false
        })
    }
  },
  data() {
    return {
      expandAll: true,
      option: {
        requestApi: roleApi,
        columns: [{
          label: '角色名称',
          prop: 'title',
          type: ColumnType.TEXT,
          searchable: true,
          span: 14,
          rules: [{
            required: true,
            message: '角色名称不能为空'
          }]
        }, {
          label: '备注',
          prop: 'notes',
          width: 300,
          span: 20,
          type: ColumnType.TEXTAREA,
          rows: 4
        }, {
          label: '创建时间',
          prop: 'gmtCreate',
          type: ColumnType.DATETIME,
          hiddenInForm: true
        }, {
          label: '修改时间',
          prop: 'gmtModified',
          type: ColumnType.DATETIME,
          hiddenInForm: true
        }]
      },
      isUpdatingGrade: false,
      grade: {
        box: false,
        check: []
      },
      loadingGrade: false
    }
  }
}
</script>

